<template>
  <el-dialog
    :close-on-click-modal="false"
    modal-append-to-body lock-scroll top="10%"
    :width="'800px'"
    :title="$t('public.edit2') + showItem.phone"
    :visible.sync="isdealog"
  >
    <div style="height: 440px;overflow-y:auto;overflow-x: hidden;margin-bottom: 40px">
      <el-form ref="form" :model="form" :rules="rules" :validateOnRuleChange="false" label-position="top">
        <el-row class="add-item" v-for="(phone,index) in form.custPhones" :key="index" :gutter="20">
          <el-col :span="11">
            <el-form-item :prop="index===0 ? 'custPhones' : undefined" :label="showItem.phone">
              <el-input size="mini"  v-model.trim="phone.tel" @input="telChange(phone)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item :label="showItem.phoneMemo">
              <el-input size="mini" :placeholder="showItem.phoneMemo" v-model.trim="phone.memo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" style="padding-left: 3px" class="push-del">
            <span class="push" v-if="index===0" @click.stop="addLink()"><i class="el-icon-plus"></i></span>
            <span class="push del" v-else @click.stop="delLink(index)"><i class="el-icon-minus"></i></span>
          </el-col>
        </el-row>
        <el-form-item class="form__footer">
          <el-button type="primary" class="primary_btn" @click="submit">{{$t('public.save')}}</el-button>
          <!-- <el-button class="primary_btn" @click="close">{{$t('public.getback')}}</el-button> -->
        </el-form-item>
      </el-form>
      <!-- 测试 -->
      <!-- {{form}} -->
    </div>
  </el-dialog>
</template>

<script>
import { deepClone, checkHideTel, phoneFilterChats } from 'src/utils/m7Utils'
import { isHideTel } from 'src/utils/customerUtils.js'

export default {
  name: 'EditPhoneDialog',
  components: {},
  data () {
    return {
      isdealog: false,
      form: {
        custPhones: []
      }
    }
  },
  props: {
    showItem: {
      type: Object,
      default () {
        return {}
      }
    },
    rules: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    isHideTel () {
      return isHideTel(this.$store.state.session.user)
    }
  },
  methods: {
    hideTel (tel) {
      return checkHideTel(tel, this.$store.state.session.user)
    },
    open (custPhones) {
      if (custPhones && custPhones.length) {

      } else {
        custPhones = [{
          memo: '',
          tel: ''
        }]
      }

      var custPhonesClone = deepClone(custPhones)

      custPhonesClone.forEach(obj => {
        obj.realTel = obj.tel
        obj.tempTel = obj.tel
        if (this.isHideTel) {
          obj.tel = this.hideTel(obj.tel)
        }
      })

      this.form.custPhones = custPhonesClone
      this.isdealog = true
      this.$nextTick(function () {
        this.$refs['form'].clearValidate()
      })
    },
    close () {
      this.isdealog = false
    },
    addLink () {
      this.form.custPhones.push({
        memo: '',
        tel: ''
      })
    },
    delLink (index) {
      this.form.custPhones.splice(index, 1)
    },
    telChange (val) {
      if (val.tempTel && val.tel && val.tel.indexOf('*') > -1) {
        val.realTel = val.tempTel
      } else {
        val.realTel = phoneFilterChats(val.tel)
      }
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          var custPhones = this.form.custPhones
          .filter(d => {
            return d.realTel
          })
          .map(d => {
            return {
              area: d.area,
              tel: d.realTel,
              memo: d.memo
            }
          })
          this.$emit('submit', custPhones)
        } else {
          this.$message({
            type: 'error',
            message: this.$t('public.pleaseEnterRequireItem')
          })
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .push
    font-size 18px
    color $c-main
    display inline-block
    font-weight 700
    cursor pointer
  .del
    color red
  .push-del
    margin-top 33px
  .add-item
    margin-bottom 10px
  .form__footer
    position absolute
    left 0
    bottom 0
    width 100%
    border-radius 4px
    margin 0
    background $cf-white
    z-index 6
    border-top 1px solid #dfe6ec
    text-align right
    border-top-left-radius 0
    border-top-right-radius 0
  .el-form .primary_btn
    margin-left 20px
    &:last-child
      margin-right 20px
</style>
